<template>
    <div>
        <div class="secrch">
            <input type="text" :value="getItem" placeholder="搜索房间/主播/分类">
            <span>搜索</span>
        </div>
        <div class="title">
            最近热搜
        </div>

        <p v-if="getItem">{{getItem}}</p>

        <ol v-else>
            <li @click="getClickLi(item)" v-for="(item,i) in list" :key="i"><span>{{i+1}}</span> {{item}}</li>
        </ol>
    </div>
</template>

<script>
import {getTrending,getTrendingResult} from '../utils/api'
export default {
    name: 'ssearch',
    data() {
        return {
            list:[],
            getItem:'',
        };  
    },
    created() {
        getTrending().then(res => {
            this.list = res.data
        }),
        getTrendingResult().then(res => {
        })
    },
    methods: {
        // 点击热搜
        getClickLi(item) {
            console.log(item);
            this.getItem = item
        }
    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
.secrch{
    width: 100%;
    display: flex;
    height: 38px;
    padding: 0 14px 0 9px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
    align-items: center;
    input{
        width: 85%;
        background-color: #eee;
        box-sizing: border-box;
        height: 26px;
        padding-left: 10px;
        border: none;
        outline: none;
    }
}
.title{
    width: 100%;
    height: 55px;
    line-height: 55px;
    font-size: 14px;
    font-weight: 700;
    padding-left: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
}
ol{
    width: 100%;
    height: 200px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    li{
        width: 50%;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding-left: 10px;
        // background-color: violet;
        span{
            display: inline-block;
            height: 16px;
            width: 18px;
            text-align: center;
            line-height: 16px;
            background-color: yellowgreen;
        }
    }
}
</style>
